<template>
  <div>
    <!-- 顶部信息头 -->
    <HeadInfo />

    <!-- 面包屑导航 -->
    <BreadCrumb />

    <div class="preview">
      <div class="miniprogram-wraper">
        <div class="miniprogram-head">
          <div class="time">{{ nowTime }}</div>
          <div class="head-title ellipsis">{{ title }}</div>
        </div>
        <div class="miniprogram-con">
          <iframe :src="`${urlKey}`" />
        </div>
      </div>

      <div class="erweima-wraper"></div>
    </div>
  </div>
</template>

<script>
import "./pagepreview.scss";
import http from "@/http/";
import HeadInfo from "@/components/HeadInfo";
import BreadCrumb from "@/components/BreadCrumb";
import { formatDateTime } from "@/utility/";

export default {
  data() {
    return {
      urlKey: null,
      title: "",
      page: {},
      clearInterval: null,
      nowTime: undefined
    };
  },
  created() {
    // 清除定时器
    this.nowTime = formatDateTime(new Date().getTime() * 1).slice(10, 16);
    this.clearInterval = setInterval(() => {
      this.nowTime = formatDateTime(new Date().getTime() * 1).slice(10, 16);
      // console.log(this.nowTime);
    }, 1000);
    this.urlKey = this.$route.query.landpageUrl;
    http.getPage({ id: this.$route.query.id }).then(res => {
      this.page = res.data;
      this.title = res.data.title;
    });
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.clearInterval);
  },
  methods: {},
  components: {
    HeadInfo,
    BreadCrumb
  }
};
</script>
<style lang="scss" scoped>
.preview {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
